<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from "three"; // 引入three
const OrbitControls = require("three-orbit-controls")(THREE);
export default {
  name: "index",
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
    };
  },
  methods: {
    init() {
      let container = document.getElementById("container");
      // 创建一个相机 参数：fov、aspect、near、far
      this.camera = new THREE.PerspectiveCamera(30, 1, 0.01, 1000);
      // 相机离屏幕的距离
      this.camera.position.z = 1;
      // 创建场景
      this.scene = new THREE.Scene();
      // 创建一个立方体 参数 width、height、depth
      let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
      // 立方体的材质 参数为obj
      let material = new THREE.MeshNormalMaterial({ color: 0x00ff00 });
      // 将立方体和材质包添加到网格
      this.mesh = new THREE.Mesh(geometry, material);
      // 将网格添加到场景中
      this.scene.add(this.mesh);
      // 渲染器 参数为obj antialias：true 开启抗锯齿（默认为false）
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setClearColor(0xb9d3ff, 1);
      // 设置渲染大小
      this.renderer.setSize(500, 500);
      this.renderer.render(this.scene, this.camera);
      container.appendChild(this.renderer.domElement);
      new OrbitControls(this.camera,this.renderer.domElement)
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.01;
      this.renderer.render(this.scene, this.camera);
    },
  },
  mounted() {
    this.init();
    this.animate();
  },
  created() {},
};
</script>
<style scoped>
body {
  margin: 0;
  overflow: hidden;
  /* 隐藏body窗口区域滚动条 */
}

#container {
  width: 90vw;
  height: 100vh;
}
</style>